<div class="highlights-container">
    <h4>Likes History</h4>
    <div ng-repeat="video in user.likeList track by $index" class="video-container">
        <img ng-src="{{posterURL(video)}}" alt="video" class="thumbnail" ng-click="watch(video)"/>
        <div>
            <div class="video-title">{{getShowName(video.title, 25)}}</div>
            <div class="video-metadata">
                about <span style="font-weight:bold">{{video.topic}}</span>
                <div class="video-right">
                    <label class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span> You liked it</label>
                </div>
            </div>
        </div>
        <br ng-show="($index + 1) % 4 == 0" />
    </div>

    <div ng-show="user.likeList.length == 0">
        You haven't liked any videos yet.
    </div>
</div>

<hr class='content-separator' />

<div class='highlights-container'>
    <h4>Dislikes History</h4>
    <div ng-repeat="video in user.dislikeList track by $index" class="video-container">
        <img ng-src="{{posterURL(video)}}" alt="video" class="thumbnail" ng-click="watch(video)"/>
        <div>
            <div class="video-title">{{getShowName(video.title, 25)}}</div>
            <div class="video-metadata">
                about <span style="font-weight:bold">{{video.topic}}</span>
                <div class="video-right">
                    <label class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span> You disliked it</label>
                </div>
            </div>
            
        </div>
        <br ng-show="($index + 1) % 4 == 0" />
    </div>
    <div ng-show="user.dislikeList.length == 0">
        You haven't disliked any videos yet.
    </div>
</div>